import React, { Component } from 'react'

import FilterFooter from '../../../../components/FilterFooter'

import styles from './index.module.css'

export default class FilterMore extends Component {
  state = {
    selectedValues: this.props.defaultValue //判断高亮的储存数组
  };

  // 渲染标签
  renderFilters(data) {
    // 高亮类名： styles.tagActive
    return data.map(item => {
      let active = this.state.selectedValues.indexOf(item.value) > -1  //判断是否存在
      return (
        // styles.tagActive
        <span className={[styles.tag, active ? styles.tagActive : ''].join(' ')} key={item.value} onClick={() => this.onTagClick(item.value)
        }> {item.label}</span >
      )
    })
  }
  //item项被点击了
  onTagClick(value) {
    const { selectedValues } = this.state
    // 创建新数组，尽量不要直接操作原数组
    const newSectedValues = [...selectedValues]
    if (selectedValues.indexOf(value) <= -1) {
      // 不包含当前的value
      newSectedValues.push(value)
    } else {
      // 说明包含，就需要移除
      const index = newSectedValues.findIndex(item => item === value);
      newSectedValues.splice(index, 1)
    }
    this.setState({
      selectedValues: newSectedValues
    })

  }
  // 取消按钮
  onCancel = () => {
    this.setState({
      selectedValues: []
    })
  }
  // 确定按钮
  onOk = () => {
    const { type, onSave } = this.props;
    onSave(type, this.state.selectedValues);
  }

  render() {
    const { data: { roomType, oriented, floor, characteristic }, onCancel, type } = this.props;
    return (
      <div className={styles.root}>

        {/* 遮罩层 */}

        <div className={styles.mask} onClick={() => onCancel(type)} />

        {/* 条件内容 */}
        <div className={styles.tags}>
          <dl className={styles.dl}>
            <dt className={styles.dt}>户型</dt>
            <dd className={styles.dd}> {this.renderFilters(roomType)} </dd>

            <dt className={styles.dt}>朝向</dt>
            <dd className={styles.dd}>{this.renderFilters(oriented)}</dd>

            <dt className={styles.dt}>楼层</dt>
            <dd className={styles.dd}>{this.renderFilters(floor)}</dd>

            <dt className={styles.dt}>房屋亮点</dt>
            <dd className={styles.dd}>{this.renderFilters(characteristic)}</dd>
          </dl>

        </div>
        {/* 底部按钮 */}
        <FilterFooter className={styles.footer} cancelText="清除" onCancel={this.onCancel} onOk={this.onOk} />
      </div>
    )
  }
}
